<!DOCTYPE html>
<html>

<head>
    <style>
        body,
        html {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            /* 设置背景图像路径 */
            background-image: url("./photo/背景.png");

            /* 设置背景图像铺满整个容器 */
            background-size: cover;

            /* 设置背景图像始终位于容器的中心 */
            background-position: center;

            /* 设置背景图像不重复 */
            background-repeat: no-repeat;

            /* 固定背景图像，使页面内容滚动时背景图像保持固定 */
            background-attachment: fixed;

        }

        h1 {
            text-align: center;
            font-size: 60px;
        }

        .x {

            position: absolute;
            top: 0;
            right: 0;
        }

        .y {
            position: absolute;
            top: 0;
            left: 0;

        }

        .a {
            display: flex;
            justify-content: center;
        }

        /* 照片靠左 */

        fieldset {
            text-align: center;
            /*居中 */

            border: 5px solid black;
            /* 可选：设置边框以便更清楚地看到fieldset的边界 */
            padding: 10px;
            /* 可选：添加一些内边距 */
            margin: 0 auto;
            /* 可选：使fieldset在页面上水平居中 */
            width: 800px;

        }


        .photo-gallery {    
    width: 100%;    
    max-width: 960px;   
    display: flex;  /* 你可以添加这一行，如果你希望整个画廊也是flex容器 */  
    flex-wrap: wrap; /* 如果画廊是flex容器，这将允许它换行 */  
}    
  
.photo-row {    
    display: flex;    
    margin-bottom: 20px;   
    /* 移除图片元素的max-width设置，因为我们将在图片元素上直接设置 */  
}    
  
.photo-row img {    
    flex: 0 0 50%; /* 这将使每个图片占据50%的宽度，不缩放 */  
    max-width: 100%; /* 这将确保图片不会超出其容器的宽度 */  
    /* 你可以添加一些其他的图片样式，如height: auto;以保持图片的原始纵横比 */  
}

               /* 按钮 */
               button {
	  margin: 20px;
	}
	.custom-btn {
	  width: 130px;
	  height: 40px;
	  color: #fff;
	  border-radius: 5px;
	  padding: 10px 25px;
	  font-family: 'Lato', sans-serif;
	  font-weight: 500;
	  background: transparent;
	  cursor: pointer;
	  transition: all 0.3s ease;
	  position: relative;
	  display: inline-block;
	   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
	   7px 7px 20px 0px rgba(0,0,0,.1),
	   4px 4px 5px 0px rgba(0,0,0,.1);
	  outline: none;
	}
  	/* 12 */
		.btn-12{
		  position: relative;
		  right: 20px;
		  bottom: 20px;
		  border:none;
		  box-shadow: none;
		  width: 130px;
		  height: 40px;
		  line-height: 42px;
		  -webkit-perspective: 230px;
		  perspective: 230px;
		}
		.btn-12 span {
		  background: rgb(1, 14, 19);
		background: linear-gradient(0deg, rgb(1, 14, 19) 0%, rgb(0, 6, 11) 100%);
		  display: block;
		  position: absolute;
		  width: 130px;
		  height: 40px;
		  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
		   7px 7px 20px 0px rgba(0,0,0,.1),
		   4px 4px 5px 0px rgba(0,0,0,.1);
		  border-radius: 5px;
		  margin:0;
		  text-align: center;
		  -webkit-box-sizing: border-box;
		  -moz-box-sizing: border-box;
		  box-sizing: border-box;
		  -webkit-transition: all .3s;
		  transition: all .3s;
		}
		.btn-12 span:nth-child(1) {
		  box-shadow:
		   -7px -7px 20px 0px #fff9,
		   -4px -4px 5px 0px #fff9,
		   7px 7px 20px 0px #0002,
		   4px 4px 5px 0px #0001;
		  -webkit-transform: rotateX(90deg);
		  -moz-transform: rotateX(90deg);
		  transform: rotateX(90deg);
		  -webkit-transform-origin: 50% 50% -20px;
		  -moz-transform-origin: 50% 50% -20px;
		  transform-origin: 50% 50% -20px;
		}
		.btn-12 span:nth-child(2) {
		  -webkit-transform: rotateX(0deg);
		  -moz-transform: rotateX(0deg);
		  transform: rotateX(0deg);
		  -webkit-transform-origin: 50% 50% -20px;
		  -moz-transform-origin: 50% 50% -20px;
		  transform-origin: 50% 50% -20px;
		}
		.btn-12:hover span:nth-child(1) {
		  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
		   7px 7px 20px 0px rgba(0,0,0,.1),
		   4px 4px 5px 0px rgba(0,0,0,.1);
		  -webkit-transform: rotateX(0deg);
		  -moz-transform: rotateX(0deg);
		  transform: rotateX(0deg);
		}
		.btn-12:hover span:nth-child(2) {
		  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
		   7px 7px 20px 0px rgba(0,0,0,.1),
		   4px 4px 5px 0px rgba(0,0,0,.1);
		 color: transparent;
		  -webkit-transform: rotateX(-90deg);
		  -moz-transform: rotateX(-90deg);
		  transform: rotateX(-90deg);
		}
        .positioned-div {  
    position: absolute;  
    top: 250px;  
    left: 90px;  
}

/* 音乐按钮的样式 */
.music-button {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url('./photo/图层\ 2.png'); /* 音乐开启时的图标 */
    background-size: cover;
    cursor: pointer;
  }

  /* 当音乐暂停时的按钮样式 */
  .music-button.paused {
    background-image: url('./photo/图层\ 1.png'); /* 音乐关闭时的图标 */
  }
/* 按钮的右侧位置 */
.positioned-div2 {  
    position: absolute;  
    top: 350px;  
    left: 1250px;  
}
.ys{
    position: absolute;  
    top: 230px;  
    left: 1280px;  
    color: yellow;
}

    </style>
</head>

<body>

    <h1>时尚餐厅</h1>
    <br>
    <div class="a">
        <img src="./photo/搜索.png" alt="">
    </div>
    <br>
    <strong>
        <fieldset>
            <legend>闵菜主推</legend>
            <div class="photo-container">
                <div class="photo-row">
                    <img src="./美食/闽菜1.png" alt="Image 1" width="400">
                    <img src="./美食/闽菜2.png" alt="Image 2" width="400">
                </div>
                <div class="photo-row">
                    <img src="./美食/闽菜3.png" alt="Image 3" width="400">
                    <img src="./美食/闽菜4.png" alt="Image 4" width="400">
                </div>
            </div>
        </fieldset>
    </strong>

    <div class="x">
        <img src="./photo/小猫.png" alt="" width="70px" height="70px">
        <a href="./1主页面.html"><img src="./photo/退出登入.png" alt=""></a>
    </div>
    <a href="./5餐厅主页面 重做版.html"><img class="y" src="./photo/小房子.png" alt=""></a>

    <div class="positioned-div">

        <a href="7鲁菜.html"><button class="custom-btn btn-12"><span>进入!</span><span>鲁菜</span></button></a>
        <br> 
        <a href="./8川菜.html"><button class="custom-btn btn-12"><span>进入!</span><span>川菜</span></button> </a>
        <br>
        <a href="9粤菜.html"><button class="custom-btn btn-12"><span>进入!</span><span>粤菜</span></button> </a>
        <br>
        <a href="./10苏菜.html"><button class="custom-btn btn-12"><span>进入!</span><span>苏菜</span></button> </a>
        <br>
        <a href="./11闽菜.html"><button class="custom-btn btn-12"><span>进入!</span><span>闽菜</span></button></a>
        <br> 
        <a href="./12浙菜.html"><button class="custom-btn btn-12"><span>进入!</span><span>浙菜</span></button> </a>
        <br>
        <a href="./13徽菜.html"><button class="custom-btn btn-12"><span>进入!</span><span>徽菜</span></button> </a>
        <br>
        <a href="./14湘菜.html"><button class="custom-btn btn-12"><span>进入!</span><span>湘菜</span></button> </a>
        </div>

        <div class="positioned-div2">
          <a href="./11闽菜.html"><button class="custom-btn btn-12"><span>确定!</span><span>购买</span></button></a>
          </div>
          <div class="ys"><h1>276元</h1></div>

                <!-- 音乐文件，默认设置为循环播放 -->
<audio id="backgroundMusic" src="./音乐/圈9 - 萤火飞光.mp3" loop autoplay preload="auto">
	您的浏览器不支持音频元素。
	</audio>
	
	<!-- 音乐开关按钮 -->
	<div class="music-button" onclick="toggleMusic()"></div>
</body>
<SCript src="音乐.JS"></SCript>
</html>